<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="htmlcuatrang">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#menu { width:180px;  background-color:#CC6;}
#menu .theloai {background-color:#F63; color:#9FC; display:block; padding-top:5px; padding-bottom:5px;}
#menu  a { color:#C09; padding-top:3px; padding-bottom:3px; padding-left:15px; display:block; border-bottom: solid 1px #CF0; text-decoration:none;}
.tosang{ background-color:#663}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
	//$("#menu").children().css("margin-bottom","5px");
	//$("#menu div").children(".loaitin").css("border","solid 1px #600");
	
	//$("#menu").children("[href]").css("text-transform","uppercase"); //không tác dụng
	//$("#menu").find("[href]").css("text-transform","uppercase"); //có tác dụng
	
	//$(".loaitin").eq(2).css("font-size","30px");
	//alert($(".loaitin").length);

	//$("div").filter(".loaitin").css("text-align","right");
	
	//$("a").filter(":even").css("text-align","center");
	//$("a").filter(":odd").css("text-align","right");
	
	//$("a").has("span").css("font-style","italic");
	
	/*
	$('#menu').mouseover(function(event) {
	  if ($(event.target).is('a') ) {
		$(event.target).addClass('tosang');
	  }
	});
	$('#menu').mouseout(function(event) {
	  if ($(event.target).is('a') ) {
		$(event.target).removeClass('tosang');
	  }
	});
	*/
	
	//str = $("[idTL=2]").next().html();
	//alert(str);
	
	//str = $("[idTL=2]").nextAll().css("font-weight","bold");
	
	//$("#tt").nextUntil("#sk").css("font-size","30px");
	//$("#tool").nextUntil("div").css("font-size","8px");
	
	//$("a").not("[id='tt']").css("color","#66FF99");
	
	//v = $("#tool").parent().parent().attr("idTL");
	//alert(v);
	
	/*
	$("#tool").parents().each(function(){  
		t = $(this).attr('id') ; 
		alert(t);
	});
	*/
	
	/*
	$("#tool").parentsUntil('body').each(function(){  
		t = $(this).attr('id') ; 
		alert(t);
	});
	$("#tool").parentsUntil('#bodycuatrang').each(function(){  
		t = $(this).attr('id') ; 
		alert(t);
	});
	*/
	
	//$("[idLT=5]").prev().html("Giải trí");
	
	//$("[idLT=5]").prevAll().css("padding-left","40px");
	
	//$("[idLT=5]").prevUntil('#tt').css("padding-left","40px");
	
	//$("[idLT=5]").siblings().css("padding-left","40px");
	
	//$("[idTL=1] a").slice(1).css("text-align","right");
	//$("[idTL=1] a").slice(1,4).css("text-align","right");
	
});
</script>
</head>

<body id="bodycuatrang">
<div id="menu">
	Loại tin
    <div idTL=1>
	    <span class="theloai" dautien=1>Tin xã hội</span>
        <div class="loaitin">
            <a id="tt" href="/tintuc/thethao/">Thể <span>thao</span></a> 
            <a href="/tintuc/dulich">Du lịch</a>             
            <a href="#" idLT="5">Xã hội</a>             
            <a id="sk" href="#">Sức khỏe</a>
            <a  href="#">Âm nhạc</a>
        </div>
    </div>
    <div idTL=2 id="theloaiweb">
        <span class="theloai">Thế giới web</span>
        <div class="loaitin" id="loaitinweb">
              <a id="tool" href="#">Tools</a> 
        	  <a href="#">Links</a> 
              <a href="#">Template</a> 
              <a href="#">Document</a> 
        </div>
    </div>
    <div>
        <span class="theloai">Nghệ thuật sống</span>
        <div class="loaitin">
            <a href="#">Sống đẹp</a>
        </div>
    </div>
    <div>
        <span class="theloai">Thư giãn</span>
        <div class="loaitin">
            <a href="#">Thơ hay</a>
            <a href="#">Đố vui</a>  
        </div>
    </div>    
  </div>
</body>
</html>